<template>
    <page-box>
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <div class="container">
            <div class="item-box"  v-for="(item, index) in dataList"                     :key="index" @click="handleJump(item)">
                <div class="name">
                    <span>{{ item.year }}年-{{ item.townName || "暂无镇名" }}</span>
                    <div class="triangle-right"></div>
                </div>
                <div class="flex">
                    <div class="flex">
                        <div>
                            <p>{{ item.villageCount || 0 }}</p>
                            <p>村数</p>
                        </div>
                        <div>
                            <p>{{ item.houseCount || 0 }}</p>
                            <p>户数</p>
                        </div>
                        <div>
                            <p>{{ item.population || 0 }}</p>
                            <p>人口</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div>
                            <p>{{ item.totalProject || 0 }}</p>
                            <p>投资项目数</p>
                        </div>
                        <div>
                            <p>{{ Math.round(item.totalAmountInvested / 10000) || 0 }}</p>
                            <p>总投资(万)</p>
                        </div>
                        <div>
                            <p>{{ Math.round(item.accomplishAmountInvested / 10000) || 0 }}</p>
                            <p>已完成投资(万)</p>
                        </div>
                    </div>
                    <div class="flex">
                        <div>
                            <p>{{ item.enterpriseCount || 0 }}</p>
                            <p>企业数</p>
                        </div>
                        <div>
                            <p>{{ item.annualEconomicOutput || 0 }}</p>
                            <p>年产值(万)</p>
                        </div>
                        <div>
                            <p>{{ item.cropYield || 0 }}</p>
                            <p>农作物产量(吨)</p>
                        </div>
                    </div>
                    <div class="base">
                        <div>
                            <span>集体建设用地(亩)：</span>
                            <span>{{ item.buildArea || 0 }}</span>
                        </div>
                        <div>
                            <span>耕地(亩)：</span>
                            <span>{{ item.agriculturalArea || 0 }}</span>
                        </div>
                        <div>
                            <span>可流转耕地(亩)：</span>
                            <span>{{ item.conversionArea || 0 }}</span>
                        </div>
                        <div>
                            <span>闲置房屋(家)：</span>
                            <span>{{ item.idleHousing || 0 }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface DataType {
    accomplishAmountInvested: string;
    agriculturalArea: string;
    annualEconomicOutput: string;
    buildArea: string;
    conversionArea: string;
    cropYield: string;
    enterpriseCount: number;
    houseCount: number;
    idleHousing: string;
    population: number;
    totalAmountInvested: string;
    totalProject: number;
    townName: string;
    villageCount: number;
    year: number;
    cityCode: string;
}
@Component({
    name: "ResourceViewNotAlive"
})
export default class ResourceView extends Vue {
    dataList: DataType[] = [];
    created() {
        this.getPageData();
    }

    async getPageData() {
        const res = await this.$server["ResourceView/data"]({
            data: {}
        });
        if (res.data.code === 200) {
            this.dataList = res.data.data;
        }
    }

    handleJump(item: DataType): void {
        this.$router.push({
            name: "TownView",
            query: {
                cityCode: item.cityCode,
                townName: item.townName
            }
        });
    }
}
</script>

<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 50px) !important;
        background-color: transparent!important;
    }
}

.container {
    width: 100%;
    .item-box{
        margin-bottom: 10px;
        background-color: #fff;
        cursor: pointer;
       .flex{
           display: flex;
           p{
               margin: 0;
           }
           .flex{
               border-right: 1px solid #F3F3F3;
           }
           .flex:nth-child(1){
               flex: 350;
               justify-content: space-around;
               align-items: center;
               text-align: center;
           }
           .flex:nth-child(2){
               flex: 434;
               justify-content: space-around;
               align-items: center;
               text-align: center;
           }
           .flex:nth-child(3){
               flex: 434;
               justify-content: space-around;
               align-items: center;
               text-align: center;
           }
           .base{
               flex: 330;
               padding: 20px 0;
               &>div{
                   padding: 0 15px;
                   display: flex;
                   justify-content: space-between;
                   margin-bottom: 10px;
               }
               span:first-child{
                   font-size: 14px;
                   font-weight: 500;
                   line-height: 20px;
                   color: #9DA1A4;
               }
               span:last-child{
                   font-size: 14px;
                   font-weight: 500;
                   line-height: 20px;
                   color: #37383A;
               }
           }
           p:first-child{
               font-size: 24px;
               font-weight: bold;
               line-height: 33px;
               color: #37383A;
           }
           p:last-child{
               font-size: 14px;
               font-weight: 500;
               line-height: 20px;
               color: #6B6C70;
           }
       }
        &>.flex{
            border-top: 1px solid #F3F3F3;
            height: 150px;
        }
        .name{
            height: 30px;
            font-size: 14px;
            font-weight: 500;
            line-height: 30px;
            color: #37383A;
            border-left: 6px solid #DE2728;
            display: inline-flex;
            span{
                padding-left: 10px;
                padding-right: 2px;
                background-color: rgba(222, 39, 40, 0.1);
            }
        }
        .triangle-right {
            width:0;
            height:0;
            border-top:15px solid transparent;
            border-left:20px solid rgba(222, 39, 40, 0.1);
            border-bottom:15px solid transparent;
        }
    }
}
</style>
